<template>
	<div>
		<el-container class="layout">
			<el-aside class="aside" width="200px">
				<div class="title">后台管理系统</div>
				<el-menu
					default-active="activePath"
                    :router="true"
					class="el-menu-vertical-demo"
					background-color="#ffffff"
					text-color="#000000"
                    :unique-opened="true"
                    active-text-color="#1890ff"
				>
				<!-- 	<el-radio-group
						v-model="isCollapse"
						style="margin-bottom: 20px"
					>
						<el-radio-button :label="false">展开</el-radio-button>
						<el-radio-button :label="true">收起</el-radio-button>
					</el-radio-group> -->
					<el-submenu
						:index="item.path"
						v-for="item in menuList"
						:key="item.id"
					>
						<template slot="title">
                            <i :class="item.icon"></i>
							<span>{{ item.name }}</span>
						</template>
						<el-menu-item :index="subMenu.path" v-for="subMenu in item.children" :key="subMenu.id" @click="savePath(subMenu.url)">
                          <i :class="subMenu.icon"></i>
                                 <span> {{ subMenu.name }}</span>
                            </el-menu-item>
					</el-submenu>
				</el-menu>
			</el-aside>
			<el-container>
				<el-header>
                    <div class="crumbs">
                        <el-breadcrumb separator-class="el-icon-arrow-right">
                            <el-breadcrumb-item to="/console">
                                <i class="el-icon-s-home"></i>
                                <span style="margin-left: 5px">首页</span>
                                </el-breadcrumb-item>
                            <el-breadcrumb-item>{{ $route.meta.title }}</el-breadcrumb-item>
                         </el-breadcrumb>
                    </div>
                    <div class="header-right">
                    <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
                        <el-dropdown trigger="click" @command="selectedItem">
                        <span class="el-dropdown-link">
                            {{nickName}}
                            <i class="el-icon-arrow-down el-icon--right"></i>
                        </span>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item command="changeInfo">修改信息</el-dropdown-item>
                            <el-dropdown-item command="logout">退出登录</el-dropdown-item>
                        </el-dropdown-menu>
                        </el-dropdown>
                    </div>
                </el-header>
				          <el-main>
                      <!--路由占位符-->
                    <router-view></router-view>
                  </el-main>
                 <el-footer> <el-link href="https://element.eleme.io" target="_blank">后台管理系统使用必读</el-link></el-footer>
			</el-container>
		</el-container>
	</div>
</template>

<script>
import http from '@/utils/http'

export default {
	data() {
		return {
			isCollapse: false,
			menuList: [],
			activePath: '',
            nickName:''
		}
	},

	created() {
		this.getUserInfo()
        this.activePath = sessionStorage.getItem('activePath')
        console.log("actives")
        console.log(this.activePath)
	},

	methods: {
		async getUserInfo() {
			const { data: res } = await http.get('/user/getUserInfo')
			this.menuList = res.data.role_info.menu_tree;
            this.nickName = res.data.nickname
           
		},
         logout(){
            this.$confirm('退出后需重新登录,是否继续', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
            }).then(() => {
            this.$router.push('/')
            this.$message({
                type: 'success',
                message: '退出登录成功!'
            });
            // 清除localstorage和sessionStorage
            }).catch(() => {
            this.$message({
                type: 'info',
                message: '取消操作!'
            });          
            });
        },
        changeInfo(){
            console.log("修改信息")
        },
        selectedItem(operation) {
            switch (operation) {
                case "logout":
                    this.logout();
                    break;
                case "changeInfo":
                    this.changeInfo();
                    break;
            }
        },
    savePath(path){
		  // 将激活的路由(path),存入本地存储
      window.sessionStorage.setItem('activePath',path)
      this.activePath = path
		  console.log(path)
    },
		
	},
}
</script>

<style scoped lang='scss'>
.layout {
	height: 100vh;
	width: 100vw;
	overflow: hidden;
	background-color: #f6f6f6;
	.aside {
		background-color: #fff;
        .el-menu{
            user-select: none;
            border-right: none;
            .el-submenu__title i{
            font-size: 14px;
            margin: 0 4px 0 0;
  
           }
        }
	}
	.title {
		width: 200px;
		height: 50px;
		display: flex;
		justify-content: center;
		align-items: center;
		 //background: #191a23;
		 font-weight: 800;
		font-size: 26px;
		// font-family: fangsong;
        color: teal;
		padding: 5px 0;
        background-color: whitesmoke;
	}
   .el-header{
        background-color: #34495E;
        display: flex;
        align-items: center;
        justify-content: space-between;
        box-shadow: 3px 3px 10px #34495e;
        .crumbs{
            .el-breadcrumb__inner{
              color: #fff !important;
          }
        }
        .header-right{
            display: flex;
            align-items:center;
        }
        

         .el-dropdown-link {
            cursor: pointer;
            color: #ccc;
            margin-left: 10px;
        }
        .el-icon-arrow-down {
            font-size: 12px;
        }
        .demonstration {
            display: block;
            color: #8492a6;
            font-size: 14px;
            margin-bottom: 20px;
        }
    }
    .el-main{
        // background-color: #ccc;
        padding: 10px;
        margin: 15px
    }
    .el-footer{
        display: flex;
    }
}
</style>
